<template>
  <div class="home-view">
    <div class="top"></div>
    <div class="container">
      <div class="left"></div>
      <div class="main">
        <h2>主页</h2>
        <ul>
          <li v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  data() {
    return {
      list: [
        { id: 1, name: "吃饭" },
        { id: 2, name: "睡觉" },
        { id: 3, name: "打玩蛇的那个" },
        { id: 4, name: "购买520礼物" },
      ],
    };
  },
};
</script>

<style scoped lang="less">
.home-view {
  height: 100vh;
  padding-top: 50px;
}
</style>
